<template>
    <h1>{{person.age}}</h1>
    <button @click="person.age++">点我佳佳</button>
    <br>
    <span>{{person.Name}}</span>
    <button @click="person.Name+='!'">点我</button>
</template>
<script>
    import { reactive, ref, watch, watchEffect } from 'vue'
    export default {
        name: 'Demo',
        setup() {

            let person = reactive({
                Name: '张三',
                age: 17
            })

            //指定数据发生变化就执行回调
            watchEffect(() => {
                const x1 = person.Name
                const x2 = person.age
                console.log('watchEffect配置的回调执行了')
            })
            return {
                person
            }
        },
        mounted() {
            console.log(this);
        },



    }  
</script>
<style>
</style>